<template>
<div>
  <div class="backView">
      <p class="statusLabel">{{ result.signStatus == '1' ? '报名成功' : '报名失败'}}</p>
      <img class="imgView marginTop16" :src=" result.signStatus == '1'
           ? '/web-hft-ee/static/img/m/pass_test.png'
           : '/web-hft-ee/static/img/m/nopass_test.png'"/>

      <div class="container-true black16" v-if= "result.signStatus == '1' ">
        <div class="test_name marginTop16 wordBreak">
          考试类型:&nbsp;&nbsp;{{examInfo.title}}
        </div>

        <div class="test_time marginTop16 wordBreak ">
          考试时间:&nbsp;&nbsp;{{examTime}}
        </div>

        <div class="test_locale marginTop16 wordBreak" v-if="examInfo.examAddress">
           考试地点:&nbsp;&nbsp;{{examInfo.examAddress}}
        </div>
      </div>
      <div class="container-false" v-else>
        <p>原因:人数已满</p>
      </div>
  </div>
</div>
</template>

<script>
  export default {
    name: 'index',
    props: ['result','examInfo','examTime'],
    metaInfo: {title: '报名成功'},
  }
</script>

<style scoped>
.backView {
    top: 12%;
    width: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .imgView {
    width: 100px;
    height: 100px;
  }

  .statusLabel {
    font-size: 32px;
    font-weight: bold;
    color: #333333;
  }
  .black16 {
      font-size: 16px;
      color: #333333;
    }
  .test_name,.test_time,.test_locale{
    height: 48px;
    margin-bottom: 24px;
    margin-left: 24px;
    border-radius: 4px;
    background: #F7F7F7;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 10px;
    width: 100vw;
    margin-right: 24px;
  }

  .marginTop16{
    margin-top: 16px;
  }
  .container-true,.container-false{
    margin: 15px auto 0;
  }
  .wordBreak{
    word-break:break-all;
    word-wrap:break-word;
  }
</style>
